<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.js"></script>
    <script src="./better-scroll.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    
    <div class="control">
        <input type="text" class="search"> <button>搜索</button>
    </div>
   
    <div id='list'>
        <div class="goods">
            
        </div>
    </div>
    <script>
        let btn = document.querySelector('button');
        let search = document.querySelector('.search');



        btn.onclick = function(){

            if(!search.value){
                // 没有内容
                // 请求所有数据
                axios.get('/goods').then(result => {
                    render(result.data);
                });

            }else{
                // 有搜索内容
                // 把搜索的关键字, 上传到服务器去
                axios.get(`/search/keywords/${search.value}`).then(result => {
                    render(result.data);
                });
            }

            
        }
        let goods = document.querySelector('.goods');

        // 让商品滚动起来
        var bs = new BScroll('#list');

        // 请求所有数据
        axios.get('/goods').then(result => {
            render(result.data);
        });
        

        function render(arr){
            goods.innerHTML = arr.map(item => {
                return `<div>
                            <img src=${item.img}>
                             <p>名字: ${item.name}</p>
                             <p>价格: ${item.price}</p>
                             <p>销量: ${item.count}</p>
                        </div>`
            }).join('');
            // 刷新 滚动 高度
            bs.refresh();
        }
    </script>
</body>
</html>